<template>
	<view class="container">
		<view class="_card pay">
			{{$t('order.pay.please')}}
			<u-count-down class="count-down" :time="1.2 * 60 * 60 * 1000" format="HH:mm:ss" @change="countDown">
				<view class="time">
					<text>{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}:</text>
					<text>{{ timeData.minutes > 10 ? timeData.minutes : '0' + timeData.minutes }}:</text>
					<text>{{ timeData.seconds > 10 ? timeData.seconds : '0' + timeData.seconds }}</text>
				</view>
			</u-count-down>
			{{$t('order.pay.complete-pay')}}
		</view>
		<view class="_card reservation">
			<view class="left">
				{{$t('order.reservation.wait-success')}}
				<view class="text">{{$t('order.reservation.share')}}</view>
			</view>
			<u-icon name="/static/icon/share.png" size="64rpx"></u-icon>
		</view>
		<view class="_card reservation">
			<view class="left">
				{{$t('order.reservation.fail')}}
				<view class="text">{{$t('order.reservation.refund')}}</view>
			</view>
			<u-icon name="/static/icon/fail.png" size="64rpx"></u-icon>
		</view>
		<view class="_card reservation">
			<view class="left">
				{{$t('order.reservation.success')}}
				<view class="text">{{$t('order.reservation.deliver')}}</view>
			</view>
			<u-icon name="/static/icon/success.png" size="64rpx"></u-icon>
		</view>
		<view class="_card reservation">
			<view class="left">
				{{$t('order.reservation.fail')}}
				<view class="text">{{$t('order.reservation.refund')}}</view>
			</view>
			<u-icon name="/static/icon/fail.png" size="64rpx"></u-icon>
		</view>
		<view class="_card addr">
			<u-icon name="map" size="48rpx" color="#033787"></u-icon>
			<view class="info">
				<view class="name">{{addr.name}} {{addr.phone}}</view>
				<view class="address">{{addr.addr}}</view>
			</view>
		</view>
		<view class="_card share">
			{{$t('order.reservation.share')}}
			<view class="btn">{{$t('order.reservation.invite')}}</view>
		</view>
		<view class="_card goods-box">
			<view class="goods">
				<view v-for="(item, index) in goodsList" :key="index" class="item _card">
					<u-image :src="item.pic" radius="16rpx" show-loading width="168rpx" height="168rpx"></u-image>
					<view class="info">
						<view class="name">
							<view class="u-line-1">{{item.name}}</view>
							<view class="price">$28.90</view>
						</view>
						<view class="tag">標準/冰糖雪梨軟包/自己拌</view>
						<view class="parameter">
							<text>{{$t('goods.energy')}}: {{item.energy}}</text>
							<text>x 12</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="_card additional">
			<view class="item">
				<view>{{$t('order.info.goods-price')}}</view>
				<view>$2.56</view>
			</view>
			<view class="item">
				<view>{{$t('order.info.preferential')}}</view>
				<view>-$2.56</view>
			</view>
			<view class="item">
				<view>{{$t('order.info.integral')}}</view>
				<view>-$2.56</view>
			</view>
			<view class="item amount">
				<view>{{$t('order.settle.amount')}}</view>
				<view class="price">$2.56</view>
			</view>
		</view>
		<view class="_card verification">
			<w-qrcode :options="qrcode"></w-qrcode>
			<view class="code">核销码：9562 5214</view>
		</view>
		<view class="_card additional">
			<view class="item">
				<view>{{$t('order.info.sn')}}:</view>
				<view>418628327723666</view>
			</view>
			<view class="item">
				<view>{{$t('order.info.time')}}:</view>
				<view>2019-02-36 15:36:25</view>
			</view>
			<view class="item">
				<view>{{$t('order.info.pay-time')}}:</view>
				<view>2019-02-36 15:36:25</view>
			</view>
			<view class="footer">
				<view class="btn">{{$t('order.cancel')}}</view>
				<view class="btn warn">{{$t('order.reminder')}}</view>
				<view class="btn warn-full">{{$t('order.go-pay')}}</view>
			</view>
		</view>
		<view class="_card contact">
			{{$t('content.contact-customer-service')}}
		</view>
	</view>
</template>

<script>
	import picker from '@/components/picker.vue'
	export default {
		components: {
			'my-picker': picker
		},
		data() {
			return {
				addr: {
					addr: "地址地址4",
					id: 4,
					name: "姓名4",
					phone: "123131231"
				},
				goodsList: [{
						id: 1,
						pic: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: '這是早餐',
						sales: 88,
						energy: 108,
						tags: ['好吃', '配送快'],
						price: 10.86
					},
					{
						id: 2,
						pic: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						name: '這是午餐',
						sales: 88,
						energy: 108,
						tags: ['肥牛不错'],
						price: 10.86
					}
				],
				timeData: {},
				qrcode: {
					code: '9562 52149562 52149562 52149562 52149562 52149562 5214',
					size: 276
				}
			}
		},
		onShow() {

		},
		methods: {
			countDown(e) {
				this.timeData = e
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding-bottom: 88px;
	}

	._card {
		margin-top: 24rpx;
	}

	.pay {
		border: 1rpx solid #E35525;
		background-color: #FCEEE9;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #141B24;
		font-size: 30rpx;
		font-weight: 600;

		.count-down {
			margin: 0 24rpx;

			.time {
				font-size: 64rpx;
				color: #E35525;
			}
		}
	}

	.reservation {
		border: 1rpx solid #E35525;
		background-color: #FCEEE9;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #141B24;
		font-size: 30rpx;
		padding: 36rpx;

		.left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-weight: 600;

			.text {
				margin-top: 12rpx;
				font-size: 22rpx;
			}
		}
	}

	.share {
		padding: 24rpx 36rpx;
		display: flex;
		justify-content: space-between;
		color: #E35525;

		.btn {
			padding: 12rpx 21rpx;
			background-color: #E35525;
			color: #fff;
			font-size: 26rpx;
			border-radius: 12rpx;
		}
	}

	.addr {
		display: flex;
		justify-items: center;
		height: 80rpx;
		font-weight: 600;

		.info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 24rpx;

			.name {
				font-size: 24rpx;
				color: #033787;
			}

			.address {
				font-size: 30rpx;
				color: #0C1626;
			}
		}
	}

	.goods-box {
		padding: 0;

		.goods {
			padding: 24rpx;

			.item:not(:first-child) {
				border-top: 1rpx solid #E6EAEE;
				padding-top: 16rpx;
			}

			.item {
				display: flex;
				height: 160rpx;
				padding: 0;
				margin: 0;
				margin-bottom: 24rpx;

				.info {
					width: calc(100% - 108rpx);
					margin-left: 24rpx;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;
					width: 100%;

					.name {
						width: 100%;
						font-size: 30rpx;
						color: #0C1626;
						font-weight: 600;
						display: flex;
						justify-content: space-between;

						.price {
							color: #7C8493;
						}
					}

					.parameter {
						width: 100%;
						font-size: 22rpx;
						color: #B9BFCB;
						display: flex;
						justify-content: space-between;
					}

					.tag {
						display: inline;
						font-size: 22rpx;
						border-radius: 4rpx;
						padding: 12rpx;
						color: rgba(3, 55, 135, 1);
						border: 1rpx solid rgba(3, 55, 135, 1);
						background-color: rgba(3, 55, 135, 0.1);
					}
				}
			}
		}
	}

	.verification {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		align-items: center;

		.code {
			margin-top: 24rpx;
			padding: 14rpx 40rpx;
			background-color: rgba(3, 55, 135, 0.1);
			color: rgba(3, 55, 135, 1);
			border: 1rpx solid rgba(3, 55, 135, 1);
			border-radius: 12rpx;
			font-weight: 600;
		}
	}

	.additional {
		font-size: 26rpx;
		color: #0C1626;

		.item:not(:first-child) {
			margin-top: 32rpx;
		}

		.item {
			display: flex;
			justify-content: space-between;
		}

		.payment {
			display: flex;

			.u-icon {
				margin-right: 8rpx;
			}
		}

		.amount {
			height: 88rpx;
			border: 1rpx solid #E35525;
			border-radius: 12rpx;
			background-color: rgba(227, 85, 37, 0.10);
			font-weight: 600;
			font-size: 30rpx;
			align-items: center;
			padding: 0 24rpx;

			.price {
				color: #E35525;
			}
		}
	}

	.footer {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		display: flex;
		justify-content: flex-end;

		.btn:not(:first-child) {
			margin-left: 16rpx;
		}

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 24rpx;
			padding: 18rpx 36rpx;
			border-radius: 12rpx;
			border: 1rpx solid rgba(3, 55, 135, 1);
			background-color: rgba(3, 55, 135, 0.1);
			font-size: 26 rpx;
			color: rgba(3, 55, 135, 1);
		}

		.warn {
			border: 1rpx solid rgba(227, 85, 37, 1);
			background-color: rgba(227, 85, 37, 0.1);
			color: rgba(227, 85, 37, 1);
		}

		.warn-full {
			border: 1rpx solid rgba(227, 85, 37, 1);
			background-color: rgba(227, 85, 37, 1);
			color: #fff;
		}
	}

	.contact {
		display: flex;
		color: #033787;
		justify-content: center;
		align-items: center;
		font-weight: 600;
	}
</style>